<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as Cesium from 'cesium'
import "./Widgets/widgets.css"
// 设置静态资源路径
window.CESIUM_BASE_URL = "/"

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZTkyZDVmZS03MGNiLTQ4YmQtYTUwMS02YTI0Y2E4OTE2YjciLCJpZCI6MjY1MjI2LCJpYXQiOjE3MzUyODM3MDJ9.HX2jU9DxJdbu9WYQW9iFkLTvSgJtTnBehN89Da7ImUw'

// 设置cesium默认视角
// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
//   89.5,  //西边经度
//   20.4,   //南边纬度
//   110.4,  //东边经度
//   61.2  //北边纬度
// )

onMounted(() => {
  console.log(Cesium)
  var token = 'ee20013ff03e7d98b23e1251bc0b7cea';
  var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
  var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
  const viewer = new Cesium.Viewer('cesiumContainer', {
    // 是否显示信息窗口
    infoBox: false,
    // 搜索按钮
    geocoder: false,
    // home按钮
    homeButton: false,
    // 控制查看器显示模式
    sceneModePicker: false,
    // 是否显示涂层选择器
    baseLayerPicker: false,
    // 是否显示动画控件
    animation: false,
    // 是否显示帮助按钮
    navigationHelpButton: false,
    // 全屏按钮
    fullscreenButton: false,
    // 是否显示VR控件
    // vrButton:false,
    // 是否显示时间轴控件
    timeline: false,
    // 设置天空盒子
    skyBox: new Cesium.SkyBox({
      sources: {
        positiveX: require('@/assets/SkyBox/px.png'),
        negativeX: require('@/assets/SkyBox/nx.png'),
        positiveY: require('@/assets/SkyBox/ny.png'),
        negativeY: require('@/assets/SkyBox/py.png'),
        positiveZ: require('@/assets/SkyBox/pz.png'),
        negativeZ: require('@/assets/SkyBox/nz.png'),
      }
    }),
    // 控制默认地图显示
    imageryProvider: false,

  })

  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = 'none'
  // 加载高德底图
  // const gaodeImageryProvider = new Cesium.UrlTemplateImageryProvider({
  //   url: 'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
  //   subdomains: ['1', '2', '3', '4'],
  //   credit: '高德地图'
  // })

  // 将高德底图添加到viewe中
  // viewer.imageryLayers.addImageryProvider(gaodeImageryProvider)

  const gaodeImageryProvider1 = new Cesium.UrlTemplateImageryProvider({
    url: 'https://webst0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}',
    layer: 'tianDiTu',
    style: 'default',
    format: 'png',
    credit: '高德地图',
    options: 0.5,
    subdomains: ['1', '2', '3', '4'],
  })

  viewer.imageryLayers.addImageryProvider(gaodeImageryProvider1)

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(117.70925240, 39.02403074 , 100000.0),
  })
  // create entities 构件实体（cusium 场景中的可视化对象）
  const point = viewer.entities.add({
    id: 'huanghelou',
    position: Cesium.Cartesian3.fromDegrees(117.70925240, 39.02403074, 10.0),
    point: {
      pixelSize: 10,
      color: Cesium.Color.RED,
      // outlineColor: Cesium.Color.YELLOW,
      // outlineWidth: 2,
    },

  })
  const label = viewer.entities.add({
    id: 'label',
    position: Cesium.Cartesian3.fromDegrees(117.70925240, 39.02403074 , 10.0),
    label: {
      text: '泰达msd',
      font: '20px sans-serif',
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 2,
      pixelOffset: new Cesium.Cartesian2(0, 20),
    }
  })
  const billboard = viewer.entities.add({
    id: 'billboard',
    position: Cesium.Cartesian3.fromDegrees(117.70925240, 39.02403074 , 10.0),
    billboard: {
      image: require('@/assets/huanghelou.png'),
      scale: 0.3,
      pixelOffset: new Cesium.Cartesian2(0, -30),
    }
  })
  const model = viewer.entities.add({
    id: 'model',
    position: Cesium.Cartesian3.fromDegrees(117.70925240, 39.02403074 , 10),
    model: {
      uri: '/AnisotropyBarnLamp.glb',
      minimumPixelSize: 128,
      silhouetteColor: Cesium.Color.WHITE, 
      //new Cesium.Color.fromCssColorString ('#009DFF')  const customColor = new Cesium.Color.fromHsl (0, 50%, 50%, 0.7)  const customColor = new Cesium.Color.fromBytes ( 0, 246, 255, 0.46  )
      silhouetteSize: 2,
      // maximumScale: 2000,
      // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    }
  })
      // point  用于显示点
    // polyline 用于显示折线
    // polygon 用于显示多边形
    // model 用于显示模型
    // billboard 用于显示图片
    // label 用于显示文字
    // rectangle 用于显示矩形
    // ellipse 用于显示椭圆
    // ellipsoid 用于显示椭球体
    // circle 用于显示圆
    // corridor 用于显示走廊
    // wall 用于显示墙
    // polylineVolume 用于显示管道
    // box 用于显示立方体
    // sphere 用于显示球体
    // cylinder 用于显示圆柱体
    // billboard 用于显示2D图标

})

</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
